<template>
  <view class="container">
    <!-- 第一行：标题 -->
    <view class="title">
      <text>读者来稿</text>
    </view>

    <!-- 第二行：免责声明 -->
    <view class="disclaimer">
      免责声明: 本平台发布的所有信息;平台只负责发布展示,与平台无关,平台不负责任何责任.点击十字图标可以上传 图片.
    </view>

    <!-- 第三行：白色圆角视图 -->
    <view class="content-view">
      <!-- 文本域 -->
      <textarea class="textarea" v-model="text" placeholder="我想说的话...."></textarea>

      <!-- 装饰线 -->
      <view class="decorative-line"></view>

      <!-- 图片上传 -->
      <view class="upImg">
        <u-upload ref="uploadComponent" class="custom-upload" @uploadIcon="plus" @afterRead="afterRead"
          :deletable="true" :maxCount="3" :fileList="fileList" :showPreview="false" width="70" height="70"
          @delete="deleteImage"></u-upload>
      </view>

      <!-- 装饰线 -->
      <view class="decorative-line"></view>
	   <!-- 第三行：标签输入 -->
	      <view class="tags-input">
	        <textarea class="tags-textarea" v-model="tags" placeholder="请输入tag来方便您的咨询被检索，逗号分割，例如：健康,咨询"></textarea>
	      </view>
    </view>

    <!-- 第四行：确认发布按钮 -->
    <view class="submit-button">
      <button @click="submit">确认发布</button>
    </view>
  </view>
</template>

<script>
import uploadImg from '@/api/system/ask.js'; // 引入上传图片的 API
import { addAsk } from '@/api/system/ask.js'; // 引入 addAsk 方法

export default {
  data() {
    return {
      text: '', // 存储文本区域的内容
      images: [], // 存储上传的图片
	  tags:'',//标签
      fileList: [] // 存储文件列表
    }
  },

  mounted() {
    this.modifyUploadButton();
  },
  methods: {
    modifyUploadButton() {
      // 使用 this.$refs 获取 u-upload 组件实例
      const uploadComponent = this.$refs.uploadComponent;
      if (uploadComponent) {
        // 访问组件的 DOM 元素
        const uploadButton = uploadComponent.$el.querySelector('.u-upload__button');
        if (uploadButton) {
          // 修改按钮样式或文本
          uploadButton.style.backgroundColor = '#fff'; // 设置按钮背景色
          uploadButton.style.borderRadius = '5px'; // 设置按钮圆角
          uploadButton.style.border = '1px solid #666'; // 设置按钮圆角
          uploadButton.setAttribute('title', '点击上传文件'); // 设置按钮提示文本
          const uploadButtonSpan = uploadComponent.$el.querySelector('.u-upload__button span');
          uploadButtonSpan.style.color = '#666'; // 设置按钮字体颜色
          uploadButtonSpan.style.fontSize = '40px'; // 设置按钮字体大小
        }
      }
    },
    // 新增图片
    async afterRead(event) {
      const files = Array.isArray(event.file) ? event.file : [event.file];

      for (const file of files) {
        let data = {
          name: 'file',
          filePath: file.url
        };

        try {
          const response = await uploadImg(data);
          this.images.push(response.data.url); // 添加图片到预览数组
        } catch (error) {
          uni.showToast({
            title: "上传失败",
            icon: 'none'
          });
        }
      }

      // 更新 fileList
      this.fileList = this.fileList.concat(files);
      uni.showToast({
        title: "上传成功",
        icon: 'success'
      });
    },

    // 删除图片前的确认
    beforeRemove(file, fileList) {
      return new Promise((resolve, reject) => {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除这个图片吗？',
          success: (res) => {
            if (res.confirm) {
              resolve(true);
            } else {
              resolve(false);
            }
          }
        });
      });
    },

    // 预览图片
    previewImage(current) {
      uni.previewImage({
        current: current,
        urls: this.images
      });
    },

    // 删除图片
    deleteImage(index) {
      this.images.splice(index, 1); // 从数组中删除指定索引的图片
      this.fileList.splice(index, 1); // 从文件列表中删除指定索引的图片
    },

    async submit() {
      if (!this.text.trim()) {
        uni.showToast({
          title: '发言内容不能为空',
          icon: 'none'
        });
        return;
      }
	const imagesString =this.images ?this.images.join(',') : '';
      const data = {
        title: this.text,
		tags:this.tags,
        imgs: imagesString
      };

      try {
        await addAsk(data);
        uni.showToast({
          title: '发布成功',
          icon: 'success'
        });
        // 清空表单
       // this.text = '';
        //this.images = [];
        //this.fileList = [];
		this.$tab.redirectTo('/pages/ask/list');
		//this.$tab.switchTab('/pages/index');
		//this.$tab.navigateBack();
      } catch (error) {
        uni.showToast({
          title: '发布失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

 



<style scoped>
	.custom-upload {
		/* 自定义上传区域的样式 */
		border: 0px dashed #70cf82;
		/* 绿色虚线边框 */
		border-radius: 10px;
		/* 圆角边框 */
		padding: 10px;
		background-color: #fff;
		/* 背景色 */
		display: flex;
		justify-content: left;
		align-items: left;
	}

	.custom-upload .u-upload__file {
		/* 自定义文件列表项样式 */
		border: none;
		/* 去掉默认边框 */
	}

	.custom-upload .u-upload__file .u-upload__file__img {
		/* 自定义上传图片样式 */
		border-radius: 15px;
		/* 圆角边框 */
	}

	.custom-upload .u-upload__button {
		border: 12px solid #999;
	}

	/* 重定义 uicon-camera-fill 图标 */
	.custom-upload .uicon-camera-fill::before {
		content: '✖';
		/* 使用十字图标替换默认图标 */
		font-size: 24px;
		/* 图标大小 */
		color: red;
		/* 图标颜色 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		background-color: #f9f9f9;
		padding: 20px;
		height: 100vh;
	}

	.title {
		text-align: center;
		font-size: 24px;
		padding: 10px;
	}

	.disclaimer {
		margin: 20px 0;
		font-size: 14px;
		color: #999;
		padding: 10px;
	}

	.content-view {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 20px;
	}

	.decorative-line {
		height: 1px;
		background-color: #ddd;
		margin: 10px 0;
	}

	.submit-button {
		text-align: center;
	}

	.submit-button button {
		background-color: #70cf82;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 18px;
		cursor: pointer;
		width: 80%;
	}

	.image-preview {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.image-wrapper {
		position: relative;
		margin: 5px;
	}

	.image-preview image {
		width: 100px;
		height: 100px;
		border-radius: 5px;
	}

	.delete-icon {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 50%;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
		font-size: 14px;
		color: #ff0000;
	}
</style>